<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_hader" th:content="${_csrf.headerName}"/>
    <title>库存管理</title>
    <!--<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}"/>-->
    <!--<script th:src="@{/jquery/jquery-3.0.0.min.js}" ></script>-->
    <!--<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}"/>
    <script th:src="@{/jquery/jquery.twbsPagination.min.js}"></script>
    <script th:src="@{/js/tooltips/iziToast.min.js}" type="text/javascript"></script>
    <link rel="stylesheet" th:href="@{/css/tooltips/iziToast.css}"/>
    <script th:src="@{/bootstrap/js/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap-datetimepicker.zh-CN.js}"></script>
</head>
<script>
    var initParam = {
        "tableid" : "showListTable", //表格字段
        "url" : "/productController/productList",
        "optstr" : "数据操作字段",
        "searchid" : "searchDiv",
        "pageidc" : "pagination-c",
        "pageidp" : "pagination-p",
        "opt" : [
            {
                showContent : '<span class="label label-success">修改</span>',
                functionName : "add"
            },
            {
                showContent : '<span class="label label-danger">删除</span>',
                functionName : "del"
            },
            {
                showContent : '<span class="label label-info">进货历史</span>',
                functionName : "inHistory"
            }
        ]
//
//
//                '&nbsp;' +
//                '<span style="cursor: pointer" class='label label-info'>详细</span>&nbsp;' +
//                '<span style="cursor: pointer" class='label label-danger'>删除</span>'
    }
    $(function(){
        initMenu("indexNav","productMenu");
        initList(initParam);
        $('.form_date').datetimepicker({
            language: 'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
    });
    function search(){
        initList(initParam);
    }
    function add(id){
        window.location.href = "/productController/editProductPage?id=" + id;
    }
    function del(id){
//        alert(id);
        showConfirmDialog("是否删除","","delCallback(" + id + ")","mydialog");
    }
    function delCallback(id){
        $.ajax({
            url:"/productController/delProduct",
            type:'POST',
            data : {id:id},
            async : false,
            success:function (data) {
                var success = data.success;
                if(success){
                    showSuccessMsg("删除成功");
                    initList(initParam);
                }else{
                    showErrorMsg(data.msg);
                }
            }
        });
        $("#mydialog").modal("hide");
    }
    function inHistory(id){
        window.location.href = "/productController/goProductHistoryList?productId=" + id;
    }
</script>
<body>
<!--导航栏-->
<nav id="indexNav" class="navbar navbar-default" role="navigation" style="height: 50%;"></nav>
<div class="container" id="indexContainer">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row" id="searchDiv">
                <div class="col-md-2 col-sm-2 col-xs-12 form-inline">
                    <label>商品类型:</label>
                    <select id="productType" class="form-control" >
                        <option value="">全部</option>
                        <option th:each="productType:${productTypes}" th:value="${productType.code}" th:text="${productType.name}">
                        </option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 form-inline">
                    <label>编号:</label>
                    <input  type="text" class="form-control" id="productNo" placeholder="请输入商品编号"/>
                </div>
                <div class="col-md-7 col-sm-7 col-xs-12 form-inline">
                    <label for="purchaseDateBegin">日期范围选择：</label>
                    <div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="purchaseDateBegin" data-link-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" value="" readonly="readonly"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="purchaseDateBegin" value="" />
                    <div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="purchaseDateEnd" data-link-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" value="" readonly="readonly"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="purchaseDateEnd" value="" />
                </div>
            </div>
            <div class="row" style="margin-top: 5px;">
                <div class="col-md-6 col-sm-6 col-xs-12 form-inline">
                    <button type="button" onclick="search();" class="btn btn-primary">查询</button>
                    <button type="button" data-toggle="modal" onclick="add('');" class="btn btn-success">新增</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="table-responsive">
            <table id="showListTable" class="table table-hover">
                <caption>库存列表 </caption>
                <thead>
                <tr>
                    <th field="id" style="display: none">编号</th>
                    <th field="productNo">商品编号</th>
                    <th field="productTypeName">商品类型</th>
                    <th field="quantity">库存</th>
                    <th field="measurementUnitName">单位</th>
                    <th field="price">平均进价</th>
                    <th field="totalQuantity">总数</th>
                    <th field="totalPrice">总价</th>
                    <th field="purchaseDate" datatype="date">最近进货日期</th>
                    <th field="opt">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="pagination-p" class="col-md-12 col-sm-12" style="margin-top: -35px;">
            <ul id="pagination-c" class="pagination-md"></ul>
        </div>
    </div>

</div>
<!--退出确认模态框-->
<form th:action="@{/logout}" method="post" id="logoutform" style="display: none;">
    <input type="submit" value="登出"/>
</form>
<a style="display: none;" href="#" class="trigger-success">Success</a>
<a style="display: none;" href="#" class="trigger-error">Error</a>
<script th:src="@{/js/tooltips/iziToast.min.js}" type="text/javascript"></script>
<script th:src="@{/js/util.js}"></script>

</body>
</html>